<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="jquery.js"></script> 
    <link rel="stylesheet" type="text/css" href="s.css">
    <style>
      body { margin: 0px; font-family: veranda; }
      .ready {  }
      #topscreen { width: 320px; height: 220px; overflow: hidden;  }
      .toploaded { background-color: white !important; }
      .widetop { width: 400px !important; padding-right: 10px; }
      #bottomscreen { width: 320px; height: 212px; overflow: hidden; margin: 0 auto; 
        background-color: black; color: #71F51B; }
      .bottomloaded { background-color: white !important; }
      .bottomed { margin-left: 40px !important; }
      .iphoned img { margin-bottom: 100px !important; }
      .iphoned #topscreen { height: 250px !important; }
    </style>
  </head>
  <body>
    <div id="topscreen">
      <div id="topcontent"><pre style="font-size:2em;color:#666;text-align:center">[LYLA Bone Data V1.0]</pre></div>
    </div>
    <div id="bottomscreen">ANALYZING BONE...<br/><br/></div>
    <script type="text/javascript">
      $(document).ready(function() {
        var is3ds = navigator.userAgent.toLowerCase().indexOf("3ds");
        if (is3ds > -1) {
          $('#topscreen').addClass('widetop');
          $('#bottomscreen').addClass('bottomed');
          window.setInterval(function () {
            window.scrollTo(40, 220);  
          }, 50);
        } else {
          $('body').addClass('iphoned');
        }
        var codeint = window.setInterval(function() {
          if ($('#bottomscreen.bottomloaded').size() < 1) {
            var rnd = Math.random();
            $('#bottomscreen').html(  $('#bottomscreen').html() + rnd + "" );
            if (rnd > .8) $('#bottomscreen').html(  $('#bottomscreen').html() + "<br/>"); 
            if (rnd < .05) $('#bottomscreen').html(  $('#bottomscreen').html() + ".PONIES."); 
          }
        }, 5);
        var hash = window.location.hash.substring(1);
        window.setTimeout(function() {
          $('#topcontent').load(hash+'.html',function() {
            $(this).addClass('toploaded');
          });
          $('#bottomscreen').load(hash+'b.html',function() {
            $(this).addClass('bottomloaded');
          });
          window.clearInterval(codeint);
        }, 4000);
      });
    </script>
  </body>
</html>